<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div id="content"></div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";
// const chartRef = ref(null);
// // 存储 ECharts 实例
// let chartInstance = null;
// const initChart = () => {
//   if (chartRef.value) {
//     // 初始化 echarts 实例
//     chartInstance = echarts.init(chartRef.value);

//     // 配置项
//     const option = {
//       title: {
//         text: "Vue3 中使用 ECharts", // 图表标题
//       },
//       tooltip: {}, // 默认提示框配置
//       legend: {
//         data: ["销量"], // 图例名称
//       },
//       xAxis: {
//         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], // X 轴数据
//       },
//       yAxis: {}, // Y 轴默认配置
//       series: [
//         {
//           name: "销量", // 系列名称
//           type: "bar", // 图表类型为柱状图
//           data: [5, 20, 36, 10, 10, 20], // 数据值
//         },
//       ],
//     };

//     // 使用配置项渲染图表
//     chartInstance.setOption(option);
//   }
// };

// // 窗口大小变化时调整图表尺寸
// const resizeChart = () => {
//   chartInstance?.resize();
// };

// // 组件挂载后执行初始化
// onMounted(() => {
//   initChart();
//   // 监听窗口大小变化事件以支持响应式
//   window.addEventListener("resize", resizeChart);
// });

// // 组件卸载前清理资源，防止内存泄漏
// onBeforeUnmount(() => {
//   window.removeEventListener("resize", resizeChart);
//   chartInstance?.dispose(); // 销毁 echarts 实例
// });
</script>

<style scoped lang="less">
#content {
  width: 100%;
  height: 100%;
  color: green;
  background-image: url("./bg1.png");
  background-size: contain; /* 使图片适应元素大小，保持比例 */
  background-repeat: no-repeat; /* 不平铺背景图片 */
  background-position: center; /* 图片居中显示 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
